<template>
  <div class="customer-lable wap shopmanage">
    <div class="main">
      <scroller>
        <div class="loginBox">
          <div class="logoBox">
            <img class="logoImg" :src="logo"/>
            <div class="header">设置头像</div>
          </div>
          <div class="loginForm">

            <div class="shopname">
              <label style="width:1.55rem;min-width: 1.55rem;
      display: inline-block; font-weight: bold;
      text-align: justify;
      text-align-last: justify;color:#333333;
      font-size: .3rem;">店铺名称<span style='color:red;'>*</span></label>
              <input maxlength="20" style="height:.6rem;width:70%;border: 1px solid #EBEBEB;margin-left: .2rem;padding: .2rem;"
                     v-model="shopName">
            </div>

            <div style="width:100%;height: 1px;background-color: #EBEBEB"></div>

            <div style="margin: .2rem .4rem;">
              <div style="display: flex;flex-direction: row;align-items: center;">
                <div style="flex:1;">
                  <div style="display: flex;flex-direction: row;align-items: center;margin-bottom: .2rem;">
                    <label style="width:1.55rem;min-width: 1.55rem;
      display: inline-block; font-weight: bold;
      text-align: justify;
      text-align-last: justify;color:#333333;
      font-size: .3rem;">联系人<span style='color:red;'>*</span></label>
                    <input maxlength="8" style="height:.5rem;width:70%;border: 1px solid #EBEBEB;margin-left: .2rem;padding: .2rem;"
                           v-model="name">
                  </div>
                  <div style="display: flex;flex-direction: row;align-items: center;">
                    <label style="width:1.55rem;min-width: 1.55rem;
      display: inline-block; font-weight: bold;
      text-align: justify;
      text-align-last: justify;color:#333333;
      font-size: .3rem;">联系电话</label>

                    <input readonly oninput="this.value=this.value.replace(/\D/g,'')" maxlength="11"
                           style="height:.5rem;width:70%;border: 1px solid #EBEBEB;margin-left: .2rem;padding: .2rem;background-color: #F9F9F9"
                           v-model="phone">
                  </div>
                </div>
                <img v-if="distributorContactVOSs.length<3" @click="addList"
                     style="width:.58rem;height: .58rem;margin-left: .2rem;" src="./../../../assets/img/order/add.png">
                <img v-if="distributorContactVOSs.length>2" style="width:.58rem;height: .58rem;margin-left: .2rem;"
                     src="./../../../assets/img/order/add2.png">
              </div>
            </div>


            <div v-if="distributorContactVOSs.length>0">
              <div style="margin: .2rem .4rem;" v-for="(item,index) in distributorContactVOSs">
                <div style="display: flex;flex-direction: row;align-items: center;">
                  <div style="flex:1;">
                    <div style="display: flex;flex-direction: row;align-items: center;margin-bottom: .2rem;">
                      <label style="width:1.55rem;min-width: 1.55rem;
      display: inline-block; font-weight: bold;
      text-align: justify;
      text-align-last: justify;color:#333333;
      font-size: .3rem;">联系人</label>
                      <input maxlength="8" style="height:.5rem;width:70%;border: 1px solid #EBEBEB;margin-left: .2rem;padding: .2rem;"
                             v-model="item.contactName">
                      <!--<img @click="delList(index)"-->
                           <!--v-if="distributorContactVOSs.length>1&&index!=0&&index==distributorContactVOSs.length-1"-->
                           <!--style="width:.58rem;height: .58rem;margin-left: .2rem;"-->
                           <!--src="./../../../assets/img/order/delete.png">-->

                    </div>
                    <div style="display: flex;flex-direction: row;align-items: center;">
                      <label style="width:1.55rem;min-width: 1.55rem;
      display: inline-block; font-weight: bold;
      text-align: justify;
      text-align-last: justify;color:#333333;
      font-size: .3rem;">联系电话</label>
                      <input oninput="this.value=this.value.replace(/\D/g,'')" maxlength="11"
                             style="height:.5rem;width:70%;border: 1px solid #EBEBEB;margin-left: .2rem;padding: .2rem;"
                             v-model="item.phone">
                      <!--<img @click="addList"-->
                           <!--v-if="distributorContactVOSs.length>1&&index!=0&&index==distributorContactVOSs.length-1"-->
                           <!--style="width:.58rem;height: .58rem;margin-left: .2rem;"-->
                           <!--src="./../../../assets/img/order/add.png">-->

                    </div>
                  </div>
                  <!--<img @click="addList" v-if="distributorContactVOSs.length==index+1"-->
                       <!--style="width:.58rem;height: .58rem;margin-left: .2rem;"-->
                       <!--src="./../../../assets/img/order/add.png">-->
                  <img @click="delList(index)"
                       style="width:.58rem;height: .58rem;margin-left: .2rem;"
                       src="./../../../assets/img/order/delete.png">
                </div>
                <div v-if="index!=distributorContactVOSs.length-1"
                     style="width:100%;height: 1px;background-color: #EBEBEB;margin-top: .2rem;"></div>
              </div>
            </div>

            <div style="width:100%;height: 1px;background-color: #EBEBEB"></div>

            <div class="shop-textarea">
              <label>店铺简介</label>
              <textarea maxlength="300" v-model="introduction" placeholder="请输入店铺简介"></textarea>
            </div>

            <div class="shop-textarea">
              <label>店铺公告</label>
              <textarea maxlength="100" v-model="notice" placeholder="请输入店铺简介"></textarea>
            </div>


          </div>


        </div>
      </scroller>
    </div>
    <div v-if="showBtn" class="login" @click="login"
         :class="!shopName||!name||shopName.length>20||name.length>8?'disable-btn':''">
      确认
    </div>
  </div>
</template>
<!--<script src="./login.js"></script>-->
<script>
  import {Storage} from "../../../service/storage";

  export default {
    name: "login",
    components: {},
    data() {
      return {
        shopName: '',
        notice: '',
        introduction: '',
        distributorContactVOSs: [],
        shopId: Storage.get('sellerId'),
        logo: 'https://qiniu.dpzaixian.com/img/corelib_home_shop_default.png',
        showBtn: true,
        docmHeight: document.documentElement.clientHeight, //初始屏幕高度
        name: '',
        phone: '',
        distributorId:''
      }
    },
    beforeMount(height) {

      let h = document.documentElement.clientHeight || document.body.clientHeight;

    },
    methods: {
      checkPhone(val) {
        console.log("dfd", val)
      },
      delList(index) {
        this.distributorContactVOSs.splice(index, 1)
      },
      addList() {
        let obj = {
          contactName: "",
          distributorId: this.distributorId,
          phone: ""
        }
        console.log(obj);
        this.distributorContactVOSs.push(obj);
      },
      login() {
        if (this.shopName == "" || this.shopName == null || this.shopName.length > 20) {
          // this.$vux.toast.text("店铺名称不能为空！", 'middle');
          return;
        }
        if (this.name == "" || this.name == null || this.name.length > 8) {
          // this.$vux.toast.text("联系人不能为空！", 'middle');
          return;
        }
        for(let i=0;i<this.distributorContactVOSs.length;i++){
          if(this.distributorContactVOSs[i].contactName==""||this.distributorContactVOSs[i].phone==""){
            this.distributorContactVOSs.splice(i,1)
            i--;
          }
        }

        this.$ajax.jsonpost("shop/update", {
          logo: this.logo,
          name: this.shopName,
          contactName:this.name,
          phone:this.phome,
          notice: this.notice,
          introduction: this.introduction,
          distributorContactVOSs: this.distributorContactVOSs
        }, (res) => {
          console.log(res)
          if (res.code == 200) {
            this.$vux.toast.text("设置成功", 'middle');
            if(this.$route.query.type==1){
              setTimeout(() => {
                this.$router.go(-1)
              }, 1000)
            }
          } else {
            this.$vux.toast.text(res.msg, 'middle');
          }
        });
      }
    },
    created: function () {
      let that = this;


      if (!this.$fromApp(this)) {
        //获取用户信息，判断是否完善信息

        this.$ajax.get('user/info', res => {
          console.log("user/info", res);
          if (res.code == 200) {
            that.name = res.data.contactName
            that.phone = res.data.phone
            that.distributorId=res.data.id
            this.$ajax.get('shop/info', res2 => {
              console.log("shop/info", res2);
              if (res2.code == 200 && res2.data) {
                that.shopName = res2.data.name

                that.notice = res2.data.notice
                that.introduction = res2.data.introduction
                // let flag = false;//注册手机号是否加入数组
                // for (let i = 0; i < res2.data.distributorContactVOSs.length; i++) {
                //   if (res2.data.distributorContactVOSs[i].phone == res2.data.servicePhone) {
                //     flag = true;
                //   }
                // }
                // if (!flag) {
                //   res2.data.distributorContactVOSs.unshift({
                //     contactName: res.data.contactName,
                //     distributorId: res.data.id,
                //     phone: res.data.servicePhone
                //   })
                // }
                that.distributorContactVOSs = res2.data.distributorContactVOSs
                // that.distributorContactVOSs[0].distributorId=res.data.id
              }

            }, {sellerId: res.data.id});

          }

        }, {});

      }
    },
    mounted: function () {
      console.log("mounted")
      window.onresize = () => {
        if (document.body.clientHeight < this.docmHeight) {
          this.showBtn = false
          if (document.activeElement.tagName == "INPUT" || document.activeElement.tagName == "TEXTAREA") {
            setTimeout(function () {
              document.activeElement.scrollIntoViewIfNeeded();
            }, 100);
          }
        } else {
          this.showBtn = true
        }
      }
    }
  }

</script>
<style lang="less" scoped>
  /*@import "./login.less";*/
  .flex-row-between {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  .disable-btn {
    opacity: 0.5;
  }

  .loginBox {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: #fff;
    /*padding: 0rem .4rem;*/

    .logoBox {
      text-align: center;

      .logoImg {
        margin-top: .6rem;
        display: inline-block;
        width: 2.1rem;
        height: 2.1rem;
        border-radius: 50%;
      }

      div {
        margin-top: .25rem;
        color: #8E919F;
        font-size: .28rem;
      }
    }

    .loginForm {
      margin-top: .6rem;

      .shopname {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin: .2rem .4rem;

        laber {

        }
      }


      .shop-textarea {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        margin: .2rem .4rem;

        label {
          width: 1.55rem;
          min-width: 1.55rem;
          display: inline-block;
          font-weight: bold;
          text-align: justify;
          margin-top: .2rem;
          text-align-last: justify;
          color: #333333;
          font-size: .3rem;
        }
        textarea{
          height:1.5rem;width:70%;border: 1px solid #EBEBEB;margin-left: .2rem;padding: .2rem;background-color: #F9F9F9;
        }
      }

    }

  }

  .shopmanage {
    display: flex;
    flex-direction: column;
  }

  .login {
    height: 44px;
    width: 100%;
    line-height: 44px;
    background: #527DD9;
    box-shadow: 0rem .18rem .35rem .0rem rgba(82, 125, 217, 0.15);
    text-align: center;
    font-size: .34rem;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    color: rgba(255, 255, 255, 1);
  }

  textarea::-webkit-input-placeholder {
    color: #DDDDDD;
  }

  /*textarea::-moz-input-placeholder {*/
  /*color: #DDDDDD;*/
  /*}*/

  textarea::-ms-input-placeholder {
    color: #DDDDDD;
  }

</style>

